 <style type="text/css">
/* 图片展示样式 */
.images_zone{position:relative; width:120px;height:120px; overflow:hidden; float:left; margin:3px 5px 3px 0; background:#f0f0f0;border:5px solid #f0f0f0; }
.images_zone span{display:table-cell;text-align: center;vertical-align: middle;overflow: hidden;width: 120px;height: 120px;}
.images_zone span img{width:120px; vertical-align: middle;}
.images_zone a{text-align:center; position:absolute;bottom:0px;left:0px;background:rgba(255,255,255,0.5); display:block;width:100%; height:20px;line-height:20px; display:none; font-size:12px;}
/* 进度条样式 */
.up_progress{width: 300px;height: 13px;font-size: 10px;line-height: 14px;overflow: hidden;background: #e6e6e6;margin: 5px 0;display:none;}
.up_progress .progress-bar{height: 13px;background: #11ae6f;float: left;color: #fff;text-align: center;width:0%;}
.fileinput_a{display:inline-block; width:120px; height:120px; background-image: url(assets/imgs/upload.jpg);  position:relative; overflow:hidden;}
.fileinput_a:hover{background-image: url(assets/imgs/upload.jpg); }
.fileinput_input{position:absolute; right:0; top:0; font-size:100px; opacity:0; filter:alpha(opacity=0);}
</style>
<div class="main_fr_mic" style="margin-bottom:10px;">
          <i class="glyphicon glyphicon-home"></i>
          <a href="admin/index">首页</a><span>></span>
          <a  class="active">课程管理</a><span>></span>
          <a class="active">课程推荐</a>
</div>
 
<div id="interfaceList" class="main_fr_down over">
	<div class="main_fr_search over mb10">
		  <form id="search_submit" class="form-inline">
			  <div class="good_top22">
				  <span class="good_top021">条件查询</span>
				  <!-- <span class="good_top022">
				      <input type="button" onclick="search();" class="search_an01 anbg" value="查询">
		              <input type="reset" class="search_an01" value="取消">
				   </span> -->
			  </div>
			  <div class="main_fr_search_cx">
				课程名称<input name="course.name" placeholder="请输入课程名称" type="text" class="srk" style="width:200px;"/>
	                                    课程分类<input id="typeName1" placeholder="请选择课程分类" type="text" class="srk" style="width:200px;"/>
	            <input name="course.type" id="type1" type="hidden" class="srk" style="width:200px;"/>		
			  	推荐状态<select name="course.recommended" class="recommended srk" style="width:200px;">
              		<option value="1">已推荐</option>
              		<option value="0">未推荐</option>
              	</select>
              	<input type="button" onclick="search(1);" class="search_an01 anbg" value="查询">
			  </div>
		  </form>
	</div>
	<div class="sh_search over mb10">
		<div class="over sh_search_table">
			
	<div class="over mb10" style=" position:relative;">
		<div class="good_top22" style="margin-bottom: 0px;">
		  <span class="good_top021">课程列表</span>
		  <span class="good_top022">
		   </span>
		 </div>
	</div> 
	</div>
	<table class="table table-bordered table-hover">
		<thead  class="table_heaer">
			<tr class="text-center">
			<!-- <th>编号</th> -->
				<th>课程名称</th>
				<th>所属分类</th>
				<th>课时数</th>
				<th>推荐状态</th>
				<th>操作</th> 
			</tr>
		</thead>
		<tbody id="projectTable">
		</tbody>
	</table>
	</div>
			
	</div>
	<div id="pages" class="text-right"></div>
</div>

<!--  弹出层div--------------------------------------------------->
<div id="addFormDiv" class="hide" style="padding-top:15px;">
	<form class="form-horizontal" id="addForm">
		<input type="hidden" id="id" name="course.id">
		<div class="form-group">
			<label for="inputEmail3" class="col-sm-2 control-label">课程名称</label>
			<div class="col-sm-9">
				<input type="text"  class="form-control" id="name" placeholder="请输入课程名称" name="course.name" minlength="2"  maxlength="20" required>
			</div>
		</div>
		<div class="form-group">
			<label for="exampleInputEmail2" class="col-sm-2 control-label">课程分类</label>
			<div class="col-sm-9">
				<input type="text" class="form-control" id="typeName"  placeholder="请选择课程分类" minlength="2"  maxlength="20" required>
				<input type="hidden" class="form-control" id="type" name="course.type" value="1">
			</div>
		</div>
		<div class="form-group">
			<label for="exampleInputEmail2" class="col-sm-2 control-label">课程摘要</label>
			<div class="col-sm-9">
				<textarea rows="5" class="col-sm-12" id="summary" placeholder="请输入课程摘要" name="course.summary" minlength="2"  maxlength="500" required></textarea>
			</div>
		</div>
		 <div class="form-group">
			<label for="exampleInputEmail2" class="col-sm-2 control-label">课时数</label>
			<div class="col-sm-9">
				<input type="digits" class="form-control" id="lesson_num" placeholder="请输入课时数" name="course.lesson_num" required>
			</div>
		</div>
		 <div class="form-group" id="image_content">
		    <label for="exampleInputEmail2" class="col-sm-2 control-label">图片上传</label>
			<div class="col-sm-9">
			    <div style="float:left;">
			        <div class="files" id="image_path"></div>
		            <div style="clear:both;"></div><div class="up_progress"><div class="progress-bar"></div></div>
		            <div style="clear:both;"></div>
			    </div>
			    <div style="float:left;" class="fileinput_a" id="image_fileDiv">
			    	<input class="fileinput_input" type="file" value="浏览" id="imageupload" name="image_files" data-url="upload/getFileUpload" multiple/>
                </div>
                <div style="float:left;" >
              		 上传文件最大为 5M
			    </div>
	         </div>
	    </div>		
		<!-- <div class="form-group">
			<label for="exampleInputEmail2" class="col-sm-2 control-label">是否允许下载</label>
			<div class="col-sm-9">
				<select id="download" name="course.download" class="form-control" style="width:200px;">
              		<option value="1">是</option>
					<option value="0">不是</option>
              	</select>
			</div>
		</div> -->
		<!-- <div class="form-group">
			<label for="exampleInputEmail2" class="col-sm-2 control-label">是否开启评论</label>
			<div class="col-sm-9">
			<select id="comments" name="course.comments" class="form-control" style="width:200px;">
					<option value="1">是</option>
					<option value="0">不是</option>
			</select>
			</div>
		</div> -->
		<div class="form-group">
			<label for="exampleInputEmail2" class="col-sm-2 control-label">观看权限</label>
			<div class="col-sm-9">
			<select id="access_right" name="course.access_right" class="form-control" style="width:200px;">
              		<option value="1">允许</option>
              		<option value="0">禁止</option>
              	</select>
			</div>
		</div>
	</form>
</div>
<div id="actList" class="row hide" style="margin-left: 0px; margin-right: 0px;">
	<form method="post" action="selectCourseType" id="courseTypeForm">
		<div class="form-group">
			<div class="col-sm-1"></div>
			<label for="exampleInputEmail2" class="col-sm-2 control-label">课程分类:</label>
			<div class="col-sm-6">
				<input type="text" id="typeName2" placeholder="请选择课程分类" class="form-control" readonly="readonly" style="width:200px;"/>
			</div>
			<!-- <div class="col-sm-3">
				<button type="submit" class="btn btn-success">确定</button>
			</div> --> 
			<div  class="col-xs-12">
					<div class="zTreeDemoBackground"  style="width:100%; height:95%; overflow:auto; border:0px solid #000000;">
						<ul id="treeDemo1" class="ztree"></ul>
					</div>
			</div>
		</div>
	</form>
</div>
<!-- 在这里引入本页面需要的js --------------------------------------------------------->
<script>
function userList(data) {
	var dataStr = "";
	$.each(data, function(i, v) {
		dataStr += '<tr>';
		/* dataStr += '<td>' + v.id + '</td>'; */
		dataStr += '<td>' + v.name + '</td>';
		dataStr += '<td>' + v.typeName + '</td>';
		dataStr += '<td>' + v.lesson_num + '</td>';
		dataStr += '<td>';
		<#if ac(session['userId'], 'course/recommended')>
			if(v.recommended==0){
				dataStr += '<a recordId="' + v.id + '" class="btn btn-default js_recommendedButton">' + '未推荐' + '</a>';
			}else if(v.recommended==1) {
				dataStr += '<a recordId="' + v.id + '" class="btn btn-default js_recommendedButton">' + '已推荐' + '</a>';
			}
		</#if>
		dataStr += '</td>';
		dataStr += '<td>';
			if(v.recommended==0){
				<#if ac(session['userId'], 'course/getInfo')>
					dataStr += '<a href="javaScript:update(' + v.id + ');" class="btn btn-default">' + '详情' + '</a>';
				</#if>
			}else if(v.recommended==1) {
				<#if ac(session['userId'], 'course/getInfo')>
					dataStr += '<a href="javaScript:update(' + v.id + ');" class="btn btn-default">' + '详情' + '</a>';
				</#if>
				<#if ac(session['userId'], 'course/upRow')>
					dataStr += '<a href="javaScript:upRow(' + v.id + ');" class="btn btn-default" title="上移"><i class="glyphicon glyphicon-arrow-up"></i></a>';
				</#if>
				<#if ac(session['userId'], 'course/downRow')>
					dataStr += '<a href="javaScript:downRow(' + v.id + ');"class="btn btn-default" title="下移"><i class="glyphicon glyphicon-arrow-down"></i></a>';
				</#if>
			}
		dataStr += '</td>';
		dataStr += '</tr>';
	});
	$("#projectTable").html(dataStr);
	$("#projectTable .js_recommendedButton").click(function() {
		clickDelete($(this));
		return false;
	})
}
function pageChange(curr) {
	$.get("course/list2?curr="+curr, $("#search_submit").serialize(), function(data) {
		userList(data.content.list);
		laypage({
		    cont: $('#pages'), //容器。值支持id名、原生dom对象，jquery对象,
		    pages: data.content.totalPage, //总页数
		    skip: true, //是否开启跳页
		    skin: '#4599e0',
		    curr: data.content.pageNumber,
		    groups: 3, //连续显示分页数
		    jump: function(obj, first) {
		    	if(!first){ //一定要加此判断，否则初始时会无限刷新
		    		pageChange(obj.curr);
		    	}
		    }
		});
	});
}
pageChange(1);
function search(){
	pageChange(1);
}
var index;
var validator;
$().ready(function() {
	 validator = $("#addForm").validate({
	        submitHandler:function(form){
	        	$.post('course/update', $("#addForm").serialize(), function(data){
	        		if(data.code==0){
	        			layer.msg("保存成功！");
	        			layer.close(index);
	        			search();
	        		}else{
	        			layer.msg("保存失败！");
	        			return false;
	        		}
	        	}) 
	        }    
	    });
	    $("#reset").click(function() {
	        validator.resetForm();
	    });

	});
function update(id) {
	var tit = "新增课程信息";
	if(id != 0){
		$.post("course/getInfo",{id:id},function(data){
			if(data.code==0){
				for (var key in data.content){
					$("#"+key).val(data.content[key]);
			}
			 var imgshow = '<div class="images_zone"><input type="hidden" name="course.img" value="'+data.content['img']+'" /><span><img src="'+data.content['img']+'"  /></span><a href="javascript:;">删除</a></div>';
       	     $(".files").empty();
       	     jQuery('#image_path').append(imgshow);	//将上传之后的图片放到image_path容器中
       	     $("#image_fileDiv").addClass("hide");
	 		     
				if(data.content['img']==null){
					$("#image_path").empty();
					$("#image_fileDiv").removeClass("hide");
				}
			}else{
				layer.msg("获取信息失败！");
				return false;
			}
		})
		tit = "修改课程信息";
	}else{
		document.getElementById("addForm").reset();
		$("#id").val("");
		$("#image_path").empty();
		$("#image_fileDiv").removeClass("hide");
	} 
	$('input,select,textarea',$('form[id="addForm"]')).prop('readonly',true);
 	$("#addFormDiv").removeClass("hide");
	index=layer.open({
		type : 1,
		area: ['50%','80%'],
		title : tit,
		content : $("#addFormDiv"),
		
		cancel: function(index, layero) {
			 validator.resetForm();//// 重置表单验证提示
			    
			$("#addFormDiv").addClass("hide");
			layer.close(index);
		} 
	})
};
function upRow(id){
	$.post("course/upRow?id="+id , function(data){
		if (data.code == 0) {
			search();
		} else {
			layer.msg("当前课程已经在第一位！");
		}
   	});
}
function downRow(id){
	$.post("course/downRow?id="+id , function(data){
		if (data.code == 0) {
			search();
		} else {
			layer.msg("当前课程已经是最后一位！");
		}
   	});
}
function clickDelete(obj) {
	// 给按钮注册事件
	var tt="确定要将该课程设为推荐课程吗？";
	var recommended = $(".recommended").val()
	if(recommended == 1){
		tt="确定要取消该课程的推荐状态吗？";
	}
	if(confirm(tt)){
		var recordId = obj.attr("recordId");
		$.get("course/recommended", {"id":recordId,recommended:recommended}, function(data) {
			if (data.code == 0) {
				obj.closest("tr").remove();
				layer.msg("设置成功！");
			}else{
				layer.msg("设置失败！");
				return false;
			} 
		})
	}
}
var tn = 0;
$("#typeName1").focus(function(){
	tn=1;
	menu(1);
});
</script>
 
<script>
/* 课程分类树*********************************************************** */
 function menu(id) {
		$("#actList").removeClass("hide");
		$("#typeName2").val("");
		layer.open({
			type : 1,
			area: ['40%','50%'],
			title : '选择课程分类',
			content : $("#actList"),
		
			cancel: function(index) {
				layer.close(index);
			}
		})
	};
	var setting1 = {
		async: {
			enable: true,
			url:"courseType/getNodes",
			autoParam:["id", "name=n", "level=lv"],
			otherParam:{"otherParam":"zTreeAsyncTest"},
			dataFilter: filter1
		},
		view: {expandSpeed:"",
			selectedMulti: false
		},
		edit: {
			enable: false
		},
		data: {
			simpleData: {
				enable: true
			}
		},
		callback: {
			onClick: onClick
		}
	};
	function onClick(event, treeId, treeNode, clickFlag) {
		$("#typeName2").val(treeNode.name);
		if(tn==1){
			$("#typeName1").val(treeNode.name);
			$("#type1").val(treeNode.id);
		}else{
			$("#typeName").val(treeNode.name);
			$("#type").val(treeNode.id);
		}
		tn=0;
	}
	function filter1(treeId, parentNode, childNodes) {
		if (!childNodes) return null;
		for (var i=0, l=childNodes.length; i<l; i++) {
			childNodes[i].name = childNodes[i].name.replace(/\.n/g, '.');
		}
		return childNodes;
	}
	  
	function removeHoverDom(treeId, treeNode) {
		$("#addBtn_"+treeNode.tId).unbind().remove();
	};

	$(document).ready(function(){
		$.fn.zTree.init($("#treeDemo1"), setting1);
	});
</script>
<script>
 
</script>